<template>
  <div>
    <div class="MainBox" :style="{
      margin: proxy.$size(margin, '8px')
    }" :class="`${margin === 0 ? 'MainBoxList' : `list-r-${margin}`}`">
      <div class="MainBox-left" :style="{
        width: proxy.$size(widthLeft),
      }" v-if="$slots.left">
        <div class="MainBox-header" v-if="$slots.leftHead && !isSelect">
          <div class="MainBox-title MainBox-auto">
            <slot name="leftHead" />
          </div>
          <div class="MainBox-btn" v-if="$slots.leftHeadBtn">
            <slot name="leftHeadBtn" />
          </div>
        </div>
        <div class="MainBox-center">
          <el-scrollbar>
            <div :style="{
              padding: proxy.$size(paddingLeft)
            }">
              <slot name="left" />
            </div>
          </el-scrollbar>
        </div>
        <div class="MainBox-foot" v-if="$slots.leftFoot">
          <slot name="leftFoot" />
        </div>
      </div>
      <div class="MainBox-main MainBox-auto">
        <div class="MainBox-tabHead" :style="{
          marginBottom: proxy.$size(margin, '8px')
        }" v-if="$slots.tabHead">
          <slot name="tabHead" />
        </div>
        <div class="MainBox-header" v-if="$slots.mainHead">
          <slot name="mainHead" />
        </div>
        <div class="MainBox-center" :style="{
          background: background || '',
        }">
          <el-scrollbar>
            <div :style="{
              padding: proxy.$size(paddingMain, '8px'),
            }">
              <slot />
            </div>
          </el-scrollbar>
        </div>
        <div class="MainBox-foot" v-if="$slots.mainFoot">
          <slot name="mainFoot" />
        </div>
      </div>
      <div class="MainBox-Right" :style="{
        width: proxy.$size(widthRight),
      }" v-if="$slots.right">
        <div class="MainBox-header" v-if="$slots.rightHead">
          <div class="MainBox-title MainBox-auto">
            <slot name="leftHead" />
          </div>
          <div class="MainBox-btn" v-if="$slots.rightHeadBtn">
            <slot name="leftHeadBtn" />
          </div>
        </div>
        <div class="MainBox-center">
          <el-scrollbar>
            <div :style="{
              padding: proxy.$size(paddingRight)
            }">
              <slot name="right" />
            </div>
          </el-scrollbar>
        </div>
        <div class="MainBox-foot" v-if="$slots.rightFoot">
          <div class="MainBox-title MainBox-auto">
            <slot name="rightFoot" />
          </div>
        </div>
      </div>
    </div>
    <LodingBox :loading="loading" :loadingMsg="loadingMsg" />
    <DrawerJson :json="data" />
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    title?: string;
    padding?: number;
    margin?: number;
    titleLeft?: string;
    widthLeft?: number | string;
    widthRight?: number | string;
    paddingRight?: number | string;
    paddingMain?: number | string;
    paddingLeft?: number | string;
    loading?: boolean;
    loadingMsg?: string;
    background?: string;
    isSelect?: boolean;
  }>(),
  {
    margin: 8,
    padding: 8,
    paddingMain: 8,
    paddingLeft: 0,
    paddingRight: 0,
    widthLeft: 200,
    widthRight: 200,
  },
);
</script>
<style scoped lang="scss">
//
.MainBox {
  --m: 8px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;

  &.MainBoxList {
    >* {
      &:not(:last-child) {
        border-right: 1px $border solid;
      }
    }
  }

  .MainBox-auto,
  .MainBox-center {
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  >* {
    display: flex;
    flex-direction: column;

    &:not(.MainBox-main) {
      &:not(.MainBox-tabHead) {
        background: $white;
      }
    }

    >* {
      &:not(:last-child) {
        &:not(.MainBox-tabHead) {
          border-bottom: 1px $border solid;
        }
      }

      &:not(.MainBox-center) {
        >* {
          &:not(:last-child) {
            margin-right: var(--m);
          }
        }

        display: flex;
        align-items: center;
        padding: 0 var(--m);

        .MainBox-title {
          float: 1;
          font-weight: bold;
        }
      }
    }
  }

  .MainBox-header,
  .MainBox-footer {
    background: $white;
    height: 50px;
  }

  .MainBox-tabHead {
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $white;
  }

}

.loadingBox {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;

  .loadingBox-main {
    min-width: 300px;
    padding: 32px;
    background: $white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    >* {
      &:not(:last-child) {
        margin-bottom: 12px;
      }
    }

    .el-icon {
      color: $primary;
    }
  }
}
</style>
